<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">

<section class="content-header">
    <h1>
        业务员管理
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 用户管理</a></li>
        <li class="active">业务员管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">搜索条件</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form class="form-horizontal">
                    <div class="box-body">
                        <div>
                            <div class="form-group col-sm-4">
                                <label for="province" class="col-sm-3 control-label">省</label>

                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="province" placeholder="省">
                                </div>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="city" class="col-sm-3 control-label">市</label>

                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="city" placeholder="市">
                                </div>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="district" class="col-sm-3 control-label">区</label>

                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="district" placeholder="区">
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="form-group col-sm-4">
                                <label for="user_name" class="col-sm-3 control-label">登录名</label>

                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="user_name" placeholder="登录名">
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button type="submit" class="btn btn-default">清空</button>
                        <button type="submit" class="btn btn-info pull-right">搜索</button>
                    </div>
                    <!-- /.box-footer -->
                </form>
            </div>
            <div class="box col-xs-3">
                <div class="box-header">
                    <h3 class="box-title">会员列表</h3>
                </div>
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">

                    </table>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
</section>
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script>
    $(function () {
        $('#example1').DataTable({
            ordering: false,
            bServerSide: true,
            sAjaxSource: "data/salesman.json",
            fnServerData: retrieveData,
            autoWidth: false,
            lengthChange: false,
            searching: false,
            processing: true,
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            columns: [
                // {
                //     "data": "userId",
                //     "title": "用户ID",
                //     // "":""
                // },
                {
                    "data": "userName",
                    "title": "用户名",
                },
                {
                    "data": "realName",
                    "title": "真实姓名",
                },
                {
                    "data": "payStatus",
                    "title": "付费状态",
                    "render": function (data, type, full, meta) {
                        var res = '<span class="label label-danger> 未知 </span>';
                        if (data == 1) {
                            res = '<span class="label label-danger"> 未付费 </span>';
                        } else if (data == 2) {
                            res = ' <span class="label label-warning"> 月付费 </span>';
                        } else if (data == 3) {
                            res = ' <span class="label label-success"> 年付费 </span>';
                        }
                        return res;
                    }
                },
                {
                    "data": "renewStatus",
                    "title": "续费状态",
                    "render": function (data, type, full, meta) {
                        var res = '<span class="label label-danger> 未知 </span>';
                        if (data == 1) {
                            res = ' <span class="label label-success"> 自动续费 </span>';
                        } else if (data == 2) {
                            res = ' <span class="label label-warning"> 手动续费 </span>';
                        }
                        return res;
                    }
                },
                {
                    "data": "expirationTime",
                    "title": "vip过期时间",
                },
                {
                    "data": "introducer",
                    "title": "推荐人",
                },
                {
                    "data": "createDate",
                    "title": "创建时间",
                },
                {
                    "data": "delFlag",
                    "title": "删除标记",
                    "render": function (data, type, full, meta) {
                        var res = '<span class="label label-danger"> 未知 </span>';
                        if (data == 1) {
                            res = ' <span class="label label-success"> 正常 </span>';
                        } else if (data == 2) {
                            res = '<span class="label label-danger"> 删除 </span>';
                        } else if (data == 3) {
                            res = ' <span class="label label-warning"> 申请VIP </span>';
                        }
                        return res;
                    }
                },
                {
                    "data": "province",
                    "title": "省市区",
                    "render": function (data, type, full, meta) {
                        var res = full["province"] + full["city"] + full["district"];
                        return res;
                    }
                },
                {
                    "data": "userId",
                    "title": "操作",
                    "render": function (data, type, full, meta) {
                        var res = '<div>';
                        res += '<button class="btn btn-primary btn-sm" href="#"><i class="fa fa-info-circle fa-fw"></i>详情</button>';
                        res += '<button class="btn btn-warning btn-sm" href="#"><i class="fa fa-edit fa-fw"></i>修改</button>';
                        res += '<button class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash-o fa-fw"></i>删除</button>';
                        res += '<button class="btn btn-success btn-sm" href="#"><i class="fa fa-graduation-cap fa-fw"></i>取消业务员</button>';
                        res += '</div>';
                        return res;
                    }
                }
            ],
        });

        function retrieveData(sSource, aoData, fnCallback) {
            //将客户名称加入参数数组
            // aoData.push( { "name": "customerName", "value": $("#customerName").val() } );

            $.ajax({
                "type": "POST",
                "contentType": "application/json",
                "url": sSource,
                "dataType": "json",
                "data": JSON.stringify(aoData), //以json格式传递
                "success": function (resp) {
                    var data = {};
                    data["iTotalRecords"] = resp["data"]["totalPage"];
                    data["iTotalDisplayRecords"] = resp["data"]["list"].length;
                    data["aaData"] = resp["data"]["list"];
                    // data["sEcho"] = resp["data"]["totalPage"];
                    fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式
                }
            });
        }

    })
</script>